<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Distorted Button Effects</title>
		<meta name="description" content="A set of inspirational distorted button effects using SVG filters" />
		<meta name="keywords" content="distorted, effect, button, svg, inspiration, filter, web design" />

		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<!--[if IE]>
			<script src="http://www.jq22.com/jquery/html5.min.js"></script>
		<![endif]-->
		<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
	</head>
	<body>
		<div class="container">
			<header class="codrops-header">
				<h1>Distorted <br /> Button Effects <span>Using SVG Filters</span></h1>
				<p class="safari-warning"><strong>Sorry, but these effects are very experimental and currently not supported in your browser.</strong></p>
				
			</header>
			<div class="content">
				<section class="section">
					<h3 class="section__title">01</h3>
					<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
						<defs>
							<filter id="filter-goo-1">
								<feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur" />
								<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
								<feComposite in="SourceGraphic" in2="goo" />
							</filter>
						</defs>
					</svg>
					<button id="component-1" class="button button--1">
						Click me
						<span class="button__container">
							<span class="circle top-left"></span>
							<span class="circle top-left"></span>
							<span class="circle top-left"></span>
							<span class="button__bg"></span>
							<span class="circle bottom-right"></span>
							<span class="circle bottom-right"></span>
							<span class="circle bottom-right"></span>
						</span>
					</button>
				</section>
				<section class="section">
					<h3 class="section__title">02</h3>
					<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
						<defs>
							<filter id="filter-goo-2">
								<feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur" />
								<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
								<feComposite in="SourceGraphic" in2="goo" />
							</filter>
						</defs>
					</svg>
					<button id="component-2" class="button button--2" style="filter: url('#filter-goo-2')">
						Click me
						<span class="button__bg"></span>
					</button>
				</section>
				<section class="section">
					<h3 class="section__title">03</h3>
					<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
						<defs>
							<filter id="filter-goo-3">
								<feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur" />
								<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
								<feComposite in="SourceGraphic" in2="goo" />
							</filter>
						</defs>
					</svg>
					<button id="component-3" class="button button--2 button--3" style="filter: url('#filter-goo-3')">
						Click me
						<span class="button__bg"></span>
					</button>
				</section>
				<section class="section">
					<h3 class="section__title">04</h3>
					<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
						<defs>
							<filter id="filter-goo-4">
								<feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur" />
								<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
							</filter>
						</defs>
					</svg>
					<button id="component-4" class="button button--4">
						click
						<span class="button__bg" style="filter: url('#filter-goo-4')">
						<span class="blob"></span>
						<span class="blob"></span>
						<span class="blob"></span>
						<span class="blob"></span>
						</span>
					</button>
				</section>
				<section class="section">
					<h3 class="section__title">05</h3>
					<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
						<defs>
							<filter id="filter-glitch-1">
								<feTurbulence type="fractalNoise" baseFrequency="0.000001" numOctaves="1" result="warp" />
								<feOffset dx="-90" dy="-90" result="warpOffset" />
								<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warpOffset" />
							</filter>
						</defs>
					</svg>
					<button id="component-5" class="button button--5">Click me</button>
				</section>
				<section class="section">
					<h3 class="section__title">06</h3>
					<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
						<defs>
							<filter id="filter-glitch-2">
								<feTurbulence type="fractalNoise" baseFrequency="0.000001" numOctaves="1" result="warp" />
								<feOffset dx="-90" dy="-90" result="warpOffset" />
								<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warpOffset" />
							</filter>
						</defs>
					</svg>
					<button id="component-6" class="button button--6">Click me</button>
				</section>
				<section class="section">
					<h3 class="section__title">07</h3>
					<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
						<defs>
							<filter id="filter-glitch-3">
								<feTurbulence type="fractalNoise" baseFrequency="0.000001" numOctaves="1" result="warp" />
								<feOffset dx="-90" dy="-90" result="warpOffset" />
								<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warpOffset" />
							</filter>
						</defs>
					</svg>
					<button id="component-7" class="button button--7">Click me</button>
				</section>
				<section class="section">
					<h3 class="section__title">08</h3>
					<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
						<defs>
							<filter id="filter-ripple-1">
								<feImage xlink:href="img/ripple.png" x="30" y="20" width="0" height="0" result="ripple"></feImage>
								<feDisplacementMap xChannelSelector="R" yChannelSelector="G" color-interpolation-filters="sRGB" in="SourceGraphic" in2="ripple" scale="20" result="dm" />
								<feComposite operator="in" in2="ripple"></feComposite>
								<feComposite in2="SourceGraphic"></feComposite>
							</filter>
						</defs>
					</svg>
					
				</section>
				<section class="section">
					<h3 class="section__title">09</h3>
					<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
						<defs>
							<filter id="filter-ripple-2">
								<feImage xlink:href="img/ripple.png" x="30" y="20" width="0" height="0" result="ripple"></feImage>
								<feDisplacementMap xChannelSelector="R" yChannelSelector="G" color-interpolation-filters="sRGB" in="SourceGraphic" in2="ripple" scale="20" result="dm" />
								<feComposite operator="in" in2="ripple"></feComposite>
								<feComposite in2="SourceGraphic"></feComposite>
							</filter>
						</defs>
					</svg>
					<button id="component-9" class="button button--9" style="filter: url('#filter-ripple-2')">Click</button>
				</section>
				<section class="section">
					<h3 class="section__title">10</h3>
					<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
						<defs>
							<filter id="filter-music">
								<feTurbulence type="fractalNoise" baseFrequency="0.000001" numOctaves="1" result="warp" />
								<feOffset dx="0" dy="-90" result="warpOffset" />
								<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warpOffset" />
							</filter>
						</defs>
					</svg>
					<button id="component-10" class="button button--10">
						<span class="button__text">Play</span>
						<span class="button__bg"></span>
					</button>
				</section>
			</div>
		</div>
		<!-- /container -->
		<script src="js/TweenMax.min.js"></script>
		<script src="js/main.js"></script>
	</body>
</html>
